import React, {Component} from 'react'
import {Relax} from "plume2";
import ares from 'ares-mobile';
import Slider from 'react-slick';
import { hashHistory } from 'react-router';
import {List, WhiteSpace, Button, AppIcon, WingBlank, Toast, Radio, Flex,Modal} from 'ares-uikit';
@Relax
export default class Preview extends Component<any, any> {
    static relaxProps = {
        list: "bjList",
        index:"bjIndex",
        changeBannerImage:()=>{}
    };
    constructor(props) {
        super(props);
        ares.extra.add('logout');
        ares.config({
            jsApiList: [
                'biz.navigation.setTitle'
            ]
        })
        ares.ready(() => {
            ares.biz.navigation.setTitle({
                title: "预览背景图片"
            })
        });
        this.state = {
          _index:-1,
          bjIndex:this.props.relaxProps.index
        }
    }
    setBack = () => {
        ares.biz.navigation.onBack({
            onSuccess: function (data) {
                hashHistory.replace({
                    pathname: `/qm-app-xsite/change`,
                    state: { selectStatus: 1 }
                });
            }
        })
    };
    componentDidMount() {
        this.setBack()
    }
    render() {
        let {list} = this.props.relaxProps;
        if(list.length === 0 || list.size === 0){
            return<div />
        }
        let settings = {
            // autoplay:true,
            initialSlide:this.state.bjIndex,
            arrows:false,
            className:"center",
            centerPadding:"60px",
            dots:true,
            infinite:true,
            slidesToScroll:1,
            slidesToShow:1,
            speed:500,
        };
        let _li=[];
        list.map((_item,index)=>{
            _li.push(<li key={index} className="previewImg">
                <img src={_item.bannerImage} alt=""/>
            </li>)
        });
        return (
            <div className="preview">
                <Slider {...settings} afterChange={(index)=>{this.setState({_index:index})}}>
                    {_li}
                </Slider>
                <Flex className="fix-footer"> <Flex.Item><Button type="primary" across onClick={(e)=>this.headerClick()}>确认</Button></Flex.Item></Flex>
            </div>
        );
    }
    headerClick = ()=>{
        //this.props.router.push('/qm-app-xsite/preview');
       let index=this.state._index;
        if(index===-1){
            index=this.props.relaxProps.index
        }
        console.log(index);
        this.props.router.go(-2);
        let ImageBanner=this.props.relaxProps.list[index].bannerImage;
        this.props.relaxProps.changeBannerImage(ImageBanner);
        console.log(ImageBanner);
    }
}